import classNames from 'classnames'
import { useMemo } from 'react'
import PropTypes from 'prop-types'
import { billTypeToName } from '@/contents'
import './index.scss'
import { useState } from 'react'
import Icon from '@/components/icon'

export default function DailyBill({ date, billList }) {
  // 支出 收入 结余
  const dayResult = useMemo(() => {
    const pay = billList.filter((item) => item.type === 'pay').reduce((a, c) => a + c.money, 0)
    const income = billList.filter((item) => item.type === 'income').reduce((a, c) => a + c.money, 0)
    return {
      pay,
      income,
      total: pay + income
    }
  }, [billList])

  // 控制数据区域的展开和收起
  const [visible, setVisible] = useState(false)

  return (
    <div className={ classNames('dailyBill') }>
      <div className="header">
        <div className="dateIcon">
          <span className="date">{ date }</span>
          {/* 箭头 */ }
          <span className={ classNames('arrow', visible && 'expand') } onClick={ () => setVisible(!visible) }></span>
        </div>
        <div className="oneLineOverview">
          <div className="pay">
            <span className="type">支出</span>
            {/* toFixed(2)是保留两位小数 */ }
            <span className="money">{ dayResult.pay.toFixed(2) }</span>
          </div>
          <div className="income">
            <span className="type">收入</span>
            <span className="money">{ dayResult.income.toFixed(2) }</span>
          </div>
          <div className="balance">
            <span className="money">{ dayResult.total.toFixed(2) }</span>
            <span className="type">结余</span>
          </div>
        </div>
      </div>

      {/* 单日列表 */ }
      <div className="billList" style={ { display: visible ? 'block' : 'none' } }>
        { billList.map(item => {
          return (
            <div className="bill" key={ item.id }>
              {/* 渲染图标 */ }
              <Icon type={ item.useFor } />
              <div className="detail">
                <div className="billType">{ billTypeToName[item.useFor] }</div>
              </div>
              <div className={ classNames('money', item.type) }>
                { item.money.toFixed(2) }
              </div>
            </div>
          )
        }) }
      </div>
    </div>
  )
}

DailyBill.propTypes = {
  date: PropTypes.string.isRequired,
  billList: PropTypes.array.isRequired
}